<template>
  <div class="echarts_container">
    <div id="left-cost-statistics_echarts"></div>
  </div>
</template>

<script lang="ts">

import * as echarts from "echarts";
import { getByKeyApi } from "@/api/largeScreen";
export default {
  name: "leftCostStatistics",
  data () {
    return {
      radio: 1,
      leftCostStatisticsTimer: null,
    }
  },
  mounted() {
    this.initData()
    // 五分钟刷新一下数据
    this.leftCostStatisticsTimer = setInterval(() => {
      this.initData()
    }, 300000)
  },
  beforeUnmount() {
    clearInterval(this.leftCostStatisticsTimer)
  },
  methods: {
    initData () {
      getByKeyApi("transactionStatistics").then((res) => {
        const { data } = res
        //   // 切换页面回来之后echarts不渲染的问题(移除_echarts_instance_属性)
        const echartsDOM = document.getElementById("left-cost-statistics_echarts")
        if (!echartsDOM) return;
        echartsDOM?.removeAttribute('_echarts_instance_')
        const myChart = echarts.init(echartsDOM);

        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: ['35%', '60%'],
              data: [
                { value: data[0].configValue, name: data[0].configName },
                { value: data[1].configValue, name: data[1].configName },
              ],
              // emphasis: {
              //   itemStyle: {
              //     shadowBlur: 10,
              //     shadowOffsetX: 0,
              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
              //   }
              // },
              label: {
                formatter: '{b}: {c} \n {d}%',
                alignTo: 'edge',
                minMargin: 5,
                edgeDistance: 30,
                lineHeight: 20,
                color: '#fff',
                // fontSize: 14,
                // rich: {
                //   time: {
                //     fontSize: 10,
                //     color: '#999'
                //   }
                // }
              },
              labelLayout: function (params) {
                const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                const points = params.labelLinePoints;
                // Update the end point.
                points[2][0] = isLeft
                  ? params.labelRect.x
                  : params.labelRect.x + params.labelRect.width;
                return {
                  labelLinePoints: points
                };
              },
            }
          ]
        });
      });
    },
  }
};
</script>

<style scoped lang="scss">
.echarts_container {
  height: calc(100% - 20px);
  margin-top: 20px;
}
#left-cost-statistics_echarts {
  width: 100%;
  height: 100%;
}
</style>
